<template>
	<view class="article-meta">
		<view class="title">{{content.title}}</view>

		<view class="time">
			<view class="article-text">发表于:</view>
			<view class="article-time">{{formatDateTime(content.date)}}</view>
			<view class="views">浏览量：{{id}}</view>
		</view>
		<view v-html="content.txt" class="content">{{content.txt}}</view>
		<view style="margin-left: 280px;margin-top: 25px;">
			<view style="display: inline-block;" @click="Cai()">
				<image src="../../static/caiyixia.png" mode="widthFix"
					style="width: 25px;height: 25px; margin-left: -50px;padding-right: 5px;margin-bottom: -5px;"></image>
			</view>
			<view style="display: inline-block;"  @click="Zan()">
				<like-button style="width: 25px;height: 25px;"></like-button>
			</view>
		</view>
		<view class="section">
			<form>
				<textarea v-model="comments" placeholder="期待你的神评论" />
				<button @click="send()" style="display: block;" size="mini">发表评论</button>
			</form>
		</view>
		<block v-for="(value, index) in commentsList" :key="index">
		<view style="width: 100%; background-color: #FFFFFF; margin: 10px;">
			<view style="padding: 15px;">
				<image src="../../static/center-1.png" mode="widthFix" style="width: 30px; display: inline-block;"></image>
				<view style="display: inline-block; position: absolute; padding-top: 5px; left: 65px;">{{value.user.nickname}}</view>
			</view>
			<view style="">
				<view style="padding-left: 15px; padding-right: 15px;">{{value.comments}}</view>
				<view style="margin-top: 15px; padding-left: 220px;color: #c1c1c1;padding-bottom: 15px;">{{formatDateTime(value.createDate)}}</view>
			</view>
		</view>
		</block>
		<view class="boot">
			<view class="bottom"></view>
			<view class="links">
				<p>友情链接：<a href="http://www.lyvust.cn/">临沂科技职业学院</a> </p>
				<p><a href="http://nyj.linyi.gov.cn/">临沂市农业农村局</a> </p>
			</view>
		</view>
		<br>
		<br>
		<br>
	</view>

</template>

<script>
	import request from '../../util/request.js';
	import api from '../../util/api.js';
	import likeButton from '@/uni_modules/like-button/components/like-button/like-button.vue';
	export default {
		data() {
			return {
				content: '',
				id: '',
				news: 'news',
				comments: '',
				username:'',
				siteId:'c859d5588b744fe28f83064b037d3890',
				commentsList:[]
			}
		},
		components: {
			likeButton
		},
		onShow() {
			this.username = uni.getStorageSync('username');
			this.addViewCount();
			this.getCommentsList();
		},
		onLoad() {

		},
		onLoad: function(detail) {
			if( detail.content != null ){
				this.content = JSON.parse(decodeURIComponent(detail.content));
			}
		},
		methods: {
			Cai(){
				request.get(api.downOperation, {
					recordId: this.content.id,
					channelid: this.content.channel,
					siteId: this.siteId,
					username: this.username,
				}).then(response => {
					this.id = response.data.data
				}).catch(ex => {
					uni.showToast({
						icon: 'none',
						title: ex[1].data.msg
					})
				})
				uni.showToast({
					title: '踩一踩',
					icon: 'none'
				});
			},
			Zan(){
				request.getf(api.upOperation, {
					recordId: this.content.id,
					channelid: this.content.channel,
					siteId: this.siteId,
					username: this.username,
				}).then(response => {
					this.id = response.data.data
				}).catch(ex => {
					console.log('ex=', ex);
					uni.showToast({
						icon: 'none',
						title: '请求失败，请稍后再试'
					})
				})
				uni.showToast({
					title: '已点赞！',
					icon: 'none'
				});
			},
			send() {
				if (!this.comments) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return false;
				}
				request.post(api.comment, {
					recordId: this.content.id,
					channelid: this.content.channel,
					siteId: this.siteId,
					comments: this.comments,
				}).then(response => {
					if(response.data.code === 0){
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
						this.comments = '';
						this.getCommentsList();
					} else {
						uni.showToast({
							icon:'none',
							title:'上传失败，' + response.data.msg,
						})
					}
				}).catch(ex => {
					console.log('ex=', ex);
					uni.showToast({
						icon: 'none',
						title: '请求失败，请稍后再试'
					})
				})
			},
			addViewCount() {
				request.postf(api.addViewCount, {
					contentId: this.content.id,
					modelPath: this.news
				}).then(response => {
					this.id = response.data.data
				}).catch(ex => {
					console.log('ex=', ex);
					uni.showToast({
						icon: 'none',
						title: '请求失败，请稍后再试'
					})
				})
			},
			getCommentsList(){
				request.getf(api.getCommentsList, {
					contentid: this.content.id
				}).then(response => {
					if(response.data.code === 0){
						this.commentsList = response.data.data;
					}else{
						uni.showToast({
							icon: 'none',
							title: '请求失败，' + response.data.msg
						})
					}
				}).catch(ex => {
					uni.showToast({
						icon: 'none',
						title: '请求失败，请稍后再试'
					})
				})
			},
			addZero(num) {
				return num < 10 ? '0' + num : num;
			},
			formatDateTime(date) {
				const time = new Date(Date.parse(date));
				time.setTime(time.setHours(time.getHours()));
				const Y = time.getFullYear() + '.';
				const M = this.addZero(time.getMonth() + 1) + '.';
				const D = this.addZero(time.getDate()) + ' ';
				const h = this.addZero(time.getHours()) + ':';
				const m = this.addZero(time.getMinutes()) + ':';
				const s = this.addZero(time.getSeconds());
				return Y + M + D + h + m + s;
			}
		},
		mounted() {

		},
	}
</script>

<style>
	.article-meta {
		width: 100%;
		background-color: #f2f2f3;
	}

	.article-text {
		font-size: 30rpx;
		display: inline-block;
	}

	.title {
		width: 100%;
		height: 150px;
		font-size: 50px;
		padding: 10px 10px;
		text-align: center;
	}

	.article-time {
		font-size: 26rpx;
		margin-left: 10px;
		display: inline-block;
	}

	.content {
		line-height: 30rpx;
		margin-top: 30px;
		width: 100%;
		text-align: center;
		padding-left: 25px;
		padding-right: 25px;
	}

	.time {
		margin-top: -35px;
		text-align: center;
		line-height: 30rpx;

	}

	.bottom {
		width: 100%;
		height: 10px;
		background-color: #00BFFF;
		display: block;
	}

	.links {
		width: 100%;
		height: auto;
		background-color: #E4E7ED;
		text-align: center;
		display: block;
		line-height: 45px;

	}

	a:link {
		text-decoration: none;
		color: #2979FF;
	}

	a:visited {
		text-decoration: none;
		color: #2979FF;
	}


	.img {
		margin-top: 20px;
		width: 250px;
		height: 250px;
		margin-left: 250px;

	}

	.views {
		font-size: 30rpx;
		margin-left: 30px;
		display: inline-block;
	}

	.boot {
		position: fixed;
		width: 100%;
		bottom: -10px;
		display: block;
	}

	.section {
		display: block;
		border: solid 1px #19c784;
		background-color: #FFFFFF;
		margin: 15px;
		padding: 10px;
		margin-top: 30px;
		margin-bottom: 150px;
	}
</style>
